import { config } from './config'
import { dicOption } from "./config";
// const api = window.$api.vdata.visual
// const api2 = window.$api.data.map
// import md5 from 'js-md5';
export default {
  components: {
    // container
  },
  // mixins: [common],
  provide () {
    return {
      contain: this
    };
  },
  data () {
    return {
        config: config,    // 配置信息
        nav: [],
        active:[],
        isPageMenu: true,
        isBasicSet: true,
        handleEventNameOption: [
          {value:'name1', label:'跳转事件'},
        ],
        handleEventConditionsOption: [
          {value:'click', label:'单击'},
        ],
        handleEventActionOption: [
          {value:'action1', label:'链接到页面'},
        ],
        historyCache: [],            // 历史操作数据用于undo redo
        currentHistoryIndex: -1,     // redo undo 指针
        copyNav: '',                 // 用于监听去干扰,字符串类型,方便比较
    }
  },
  watch: {
    nav: {
      handler (val, oldval) {
        this.recordMain(val, oldval)
      },
      deep: true
    }
  },
  computed: {
//     list () {
//       let result = [];
//       //循环处理数据
//       const detail = (item) => {
//         if (item.children) {
//           item.children.forEach(ele => {
//             detail(ele);
//           })
//         } else {
//           result.push(item)
//         }
//       }
//       this.nav.forEach(ele => {
//         detail(ele);
//       })
//       const len = result.length - 1;
//       result.forEach((ele, index) => {
//         ele.zIndex = len - index;
//       })
//       return result
//     },
    activeObj () {
        let result
        if (this.$validatenull(this.active)) {
          return {}
        }
        this.active.forEach(ele => {
          const item = this.findnav(ele, true);
          if (this.active.length > 1) {
            this.isPageMenu = true
            if (!result) result = [];
            result.push(item.obj);
          } else {
            result = item.obj
          }
        })
        this.isBasicSet = true;
        return result
    },
    // 能否撤销
    canUndo () {
      return this.currentHistoryIndex > 0
    },
    canRedo () {
      return this.historyCache.length > this.currentHistoryIndex + 1
    },
  },
  created () {
    // this.initMap();
  },
  mounted(){
    // this.initData();

  },
  methods: {
//     //初始化数据
//     initData () {
//         const id = this.$route ? this.$route.query.id : this.props.id
//         this.id = id;
//         const isBuild = this.$route ? this.$route.name === '设计大屏' : this.props.name;


//         const loading = this.$loading({
//             lock: true,
//             text: '正在加载中，请稍后',
//             spinner: 'el-icon-loading',
//             background: 'rgba(0, 0, 0, 0.7)'
//         });
//         api.getObj(id).then(res => {
//             const data = res.data.data;
//             this.obj = data;
//             const config = data.lrDatavVisualconfigList[0];
//             this.visual = data.lrDatavVisualEntity;
//             const callback = () => {
//                 //赋值属性
//                 this.config = JSON.parse(config.f_Detail) || {};
//                 this.nav = JSON.parse(config.f_Component) || [];
//                 // if (this.config.mark.show && !isBuild) {
//                 //     this.watermark(this.config.mark);
//                 // }
//                 this.calcData();

//                 this.initScale();
//             }
//             //添加水印。只有查看页面生效
//             if (!isBuild) {
//                 const password = this.visual.f_Password
//                 if (!this.$validatenull(password)) {
//                     this.$prompt('请输入密码', '提示', {
//                     confirmButtonText: '确定',
//                     showCancelButton: false,
//                     showClose: false,
//                     closeOnClickModal: false,
//                     inputValidator:(value)=>{
//                       if(md5(value) == password){
//                         return true;
//                       }
//                       return "密码不正确";
//                     },
//                     inputErrorMessage: '密码不正确，请重新输入'
//                     }).then(() => {
//                     callback();
//                     })
//                 } else {
//                     callback();
//                 }
//             } else {
//                 callback();
//             }
//             loading.close();
//         }).catch(() => {
//             loading.close();
//         })
//     },
//     calcData () {
//         if (!this.config.mark) this.config.mark = {}
//         if (!this.config.query) this.config.query = {}
//     },

//     //初始化地图数据
//     initMap () {
//       const isBuild = this.$route ? this.$route.name === '设计大屏' : this.props.name;
//       if(isBuild){
//         api2.getAllMap().then(res => {
//           const data = res.data.data
//           this.DIC.MAP = data.map(ele => {
//             return {
//               label: ele.f_Name,
//               value: ele.f_Id
//             }
//           });
//         })
//       }
      
//     },

    // 获取组件
    findnav (id, type) {
        //循环处理数据
        let obj = undefined;
        let count = 0;
        let parent = undefined;
        let pcount = 0;
        let len = 0;
        const detail = (item, list, i, number = 0) => {
            if (!item.children || type) {
                if (id === item.index) {
                    obj = item;
                    len = Array.isArray(list) ? list.length - 1 : list.children.length - 1;
                    parent = list;
                    pcount = number;
                    count = i;
                }
            }
            if (item.children) {
                item.children.forEach((ele, index) => {
                    detail(ele, item, index, number + 1);
                })
            }
        }
        this.nav.forEach((ele, index) => {
            detail(ele, this.nav, index);
        })
        return {
            obj,
            count,
            len,
            pcount,
            parent
        }
    },


    handleInitActive () {
        this.active = [];
        this.isPageMenu = true;
        this.isBasicSet = true;
    },

    /**历史记录处理 */
    recordMain (val) {
      let newst = JSON.stringify(val)
      if (newst != this.copyNav) {
        this.copyNav = newst
        this.addHistoryCache(val)
      }
    },
    addHistoryCache (val) {
      if (this.currentHistoryIndex + 1 < this.historyCache.length) {
        this.historyCache.splice(this.currentHistoryIndex + 1)
      }
      this.historyCache.push({
        nav: this.$deepClone(val)
      })
      // 限制undo 纪录步数，最多支持100步操作undo
      this.historyCache.splice(100)
      this.currentHistoryIndex++
    },
    editorUndo () {
      if (!this.canUndo) {
        return;
      }
      this.currentHistoryIndex--
      this.relapceEditorState()
    },
    editorRedo () {
      if (!this.canRedo) {
        return;
      }
      this.currentHistoryIndex++
      this.relapceEditorState()
    },

    relapceEditorState () {
      const prevState = this.historyCache[this.currentHistoryIndex]
      this.nav = this.$deepClone(prevState.nav)
      // 版本回退,本地保存一个,方便后面对比
      this.copyNav = JSON.stringify(prevState.nav)
    },


      optionInit(option, type){
        if (type ==='line') {
          this.$set(option, 'lineWidth', this.$vaildData(option.lineWidth, 5));
          this.$set(option, 'isSmooth', this.$vaildData(option.isSmooth, true));
          this.$set(option, 'symbolSize', 10);
        }
        if (type === 'bar') {
          this.$set(option, 'barWidth', 16);
          this.$set(option, 'backgroundColor', 'rgba(180, 180, 180, 0.2)');
        }
        if (type === 'pie') {
          this.$set(option, 'centerH', 50);
          this.$set(option, 'centerV', 60);
        }
        if (dicOption.postionList.includes(type)) {
          option = this.initpostion(option)
        }
        if (dicOption.legendList.includes(type)) {
          option = this.initLagend(option)
        }
        if (dicOption.barList.includes(type)) {
          option = this.initBarLine(option)
        }
        if (dicOption.labelList.includes(type)) {
          option = this.initLabel(option, type)
        }
        return option
      },
      initBarLine(option) {
        let config = {
          xAxisShow: true,
          xNameFontSize: 12,
          xNameNameLocation: 'end',
          xAxisType: option.xAxisType || 'category',
          xNameLabelColor: '#FFFFFF',
          xNameLabelFontSize: 14,
          xAxisLineShow: true,
          xNameLineColor: "#FFFFFF",
          xAxisSplitLineShow: false,
          xAxisInverse: false,
          yAxisShow: true,
          yNameFontSize: 12,
          yNameNameLocation: 'end',
          yAxisType: option.yAxisType || 'value',
          yNameLabelColor: '#FFFFFF',
          yNameLabelFontSize: 14,
          yAxisLineShow: true,
          yNameLineColor: "#FFFFFF",
          yAxisSplitLineShow: false,
          yAxisInverse: false,
        }
        option = {...option, ...config}
        return option;
      },
      initLagend(option) {
        let config = {
          legend: this.$vaildData(option.legend, true),
          legendPostion: 'topCenter',
          legendPadding: 5,
          legendOrient: 'horizontal',
          legendColor: '#999',
          legendFontSize: 12,
          legendWidthAuto: true,
          legendItemWidth: 25,
          legendItemHeight: 14,
          legendItemIcon: 'roundRect',
        }
        option = {...option, ...config}
        return option;
      },
      initLabel(option,type) {
        let config = {
          labelShow: this.$vaildData(option.labelShow, false),
          labelShowColor: "#FFFFFF",
          labelShowFontSize: 14,
          labelShowFontWeight: 'normal',
          labelPosition: type === 'pie' ? this.$vaildData(option.labelPosition, 'outside') : this.$vaildData(option.labelPosition, 'top'),
          labelFormatterType: 'label',
          labelFormatter: '{c}'
        }
        // if (type === 'pie') config.labelPosition = this.$vaildData(option.labelPosition, 'outside')
        option = {...option, ...config}
        return option;
      },
      initpostion (option) {
        let config = {
          gridX: 80,
          gridY: 40,
          gridX2: 20,
          gridY2: 40,
        }
        option = {...option, ...config}
        return option;
      },

  }
}